<template>
  <div class="" :style="{ height: headers }">
    <div
      ref="divRef"
      class="p-[20px]"
      :class="{ ' absolute': isExpand }"
      :style="{
        'box-shadow': '0 0 10px rgba(0,0,0,0.1)',
        'width': isExpand ? `calc(100% - ${fun()})` : 'calc(100% - 40px)',
      }"
    >
      <div class="flex flex-col gap-[20px] w-full">
        <div class="flex gap-[20px] w-full justify-between" ref="childRef">
          <div class="grid grid-cols-3 w-full gap-[20px]">
            <div
              class="w-full"
              v-for="(_, key) in sliceSlots($slots, 0, isExpand ? Object.keys($slots).length : 3)"
              :key="key"
            >
              <div class="flex items-center">
                <div class="title flex w-[110px] shrink-0 overflow-hidden">
                  <div class="line-clamp-1 w-[90px]" :title="key.toString().split(':')[1]">
                    {{ key.toString().split(':')[1] }}
                  </div>
                  <div class="flex-1 min-w-0">:</div>
                </div>
                <slot :name="key"></slot>
              </div>
            </div>
          </div>
          <div class="flex whitespace-nowrap gap-[10px]">
            <div v-if="Object.keys($slots).length > 3" @click="isExpand = !isExpand">
              {{ isExpand ? '收起' : '展开' }}
            </div>
            <tiny-button>搜索</tiny-button>
            <tiny-button>重置</tiny-button>
          </div>
        </div>
        <!-- <div class="grid grid-cols-4 gap-[20px] w-full justify-between" ref="childRef">
          <div class="w-full" v-for="(_, key) in sliceSlots($slots, 0, 3)" :key="key">
            <div class="flex items-center">
              <div class="title flex w-[110px] shrink-0 overflow-hidden">
                <div class="line-clamp-1 w-[90px]" :title="key.toString().split(':')[1]">
                  {{ key.toString().split(':')[1] }}
                </div>
                <div class="flex-1 min-w-0">:</div>
              </div>
              <slot :name="key"></slot>
            </div>
          </div>
          <div class="flex whitespace-nowrap gap-[10px]">
            <div v-if="Object.keys($slots).length > 3" @click="isExpand = !isExpand">
              {{ isExpand ? '收起' : '展开' }}
            </div>
            <tiny-button>搜索</tiny-button>
            <tiny-button>重置</tiny-button>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-[20px] w-full" v-if="isExpand">
          <div v-for="(_, key) in sliceSlots($slots, 3)" :key="key">
            <div class="flex items-center">
              <div class="title flex w-[110px] shrink-0 overflow-hidden">
                <div class="line-clamp-1 w-[90px]" :title="key.toString().split(':')[1]">
                  {{ key.toString().split(':')[1] }}
                </div>
                <div class="flex-1 min-w-0">:</div>
              </div>
              <slot :name="key"></slot>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';

// 是否展开
const isExpand = ref(false);
const sliceSlots = (slots: Record<string, any>, start: number, end?: number) => {
  return Object.fromEntries(Object.entries(slots).slice(start, end));
};
const divRef = ref<HTMLDivElement>();
const childRef = ref<HTMLDivElement>();
const headers = ref('auto');
const width = ref('auto');
onMounted(() => {
  headers.value = divRef.value?.getBoundingClientRect().height + 'px';
  width.value = childRef.value?.getBoundingClientRect().width + 'px';
});

function fun() {
  console.log(1111);

  return pxToRem(80);
}

const pxToRem = (px: number) => {
  return px / 16 + 'rem';
};
</script>

<style scoped></style>
